<template>
	<view class="content">
		<view class="title">
			<text class="iconfont icon-shop"></text>
			<text>优购生活馆</text>
		</view>
		<!-- 商品列表 -->
		<view class="goods-list">
			<view class="goods-item" v-for="(item, index) in goodsCart" :key="index" @click="toItem(item.goodsId)">
				<text class="iconfont" :class="item.checked?'icon-checked':'icon-unchecked'" @click.stop="toggleCheck(item)"></text>
				<image :src="item.goods_small_logo" alt="" />
				<view class="right">
					<text class="text-line2">{{item.goods_name}}</text>
					<view class="btm">
						<text class="price">￥<text>{{item.goods_price}}</text>.00</text>
						<view class="goods-num">
							<button @click.stop="decrease(item, index)">-</button>
							<text>{{item.num}}</text>
							<button @click.stop="add(item)">+</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="account">
			<view class="select-all" @click="checkAll">
				<text class="iconfont" :class="isAll?'icon-checked':'icon-unchecked'"></text>
				<text>全选</text>
			</view>
			<view class="price-wrapper">
				<view class="price">
					<view>合计:<text class="num">￥{{AllPrice}}.00</text></view>
					<text class="info">包含运费</text>
				</view>
			</view>
			<view class="account-btn" @click="toAddress">结算({{AllNum}})</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				// 购物车数据
				goodsCart: [],
				// 商品信息
				goodsList: []
			}
		},
		// 初始化会执行,再切切换购物车页面也会执行
		onShow() {
			// 取storage cart里面每一项goodsId以,分隔
			this.cartData = uni.getStorageSync('cart') || [];
			// 如果storage cart不为空的,才发请求
			if (this.cartData.length) {
				this.queryGoodsList();
			}
		},
		computed: {
			// 总数量
			AllNum() {
				// 选中的商品数量之和
				// let sum = 0;
				// this.goodsList.forEach(item => {
				// 	if (item.checked) {
				// 		sum += item.num;
				// 	}
				// });
				// return sum;
				return this.goodsCart.reduce((sum, item) => {
					return sum + (item.checked ? item.num : 0);
				}, 0);
			},

			// 总价
			AllPrice() {
				// 选中的商品数量*商品价格之和
				return this.goodsCart.reduce((sum, item) => {
					return sum + (item.checked ? item.num * item.goods_price : 0);
				}, 0);
			},

			// 全选
			isAll: {
				get() {
					//1. 勾选的商品的数量和goodslist长度对比
					// 	let sum = 0
					// 	this.goodsCart.forEach(item => {
					// 		// item.checked&&(sum++)
					// 		if (item.checked) {
					// 			sum++
					// 		}
					// 	})
					// 	if (sum === this.goodsCart.length) {
					// 		return true
					// 	}
					// 	return false
					// }

					// 2.数组方法every 当所有选项都满足条件时返回true
					return this.goodsCart.every(item => {
						return item.checked
					})
				},
				set(status) {
					//一般在set方法,把新值设置给它的依赖
					this.goodsCart.forEach(item => {
						item.checked = status;
					});
				}
			}
		},
		watch: {
			// 侦听goodsCart的改变
			goodsCart: {
				handler() {
					// 构造一个cart,然后存storage
					let cart = this.goodsCart.map(item => {
						return {
							goodsId: item.goodsId,
							num: item.num,
							checked: item.checked
						};
					});
					// 存
					uni.setStorageSync('cart', cart);
				},
				deep: true
			}
		},
		methods: {
			// 结算跳转地址/支付页
			toAddress() {
				// 判断如果商品数量为0,提示
				if (!this.AllNum) {
					uni.showToast({
						title: '请选择商品进入结算',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/pay/pay'
				})
			},

			// 全选状态
			checkAll() {
				this.isAll = !this.isAll;
			},

			// 数量增加
			add(item) {
				item.num++;
			},

			// 数量减少
			decrease(item, index) {
				if (item.num === 1) {
					uni.showModal({
						title: '提示',
						content: '你确定要删除该商品吗？集美',
						success: res => {
							if (res.confirm) {
								this.goodsCart.splice(index, 1)
							}
						}
					})
					return;
				}
				item.num--
			},

			// 商品跳转商详
			toItem(itemId) {
				uni.navigateTo({
					url: '/pages/item/item?goodsId=' + itemId
				})
			},

			// 商品勾选切换
			toggleCheck(item) {
				item.checked = !item.checked
			},
			// 请求商品列表
			async queryGoodsList() {
				// let idStr =''
				// cart.forEach(item=>{
				// 	idStr+=item.goodsId+','
				// })
				// TODO把最后这个逗号去掉

				// goodsId数组,然后join拼接字符串
				let newId = this.cartData.map(item => {
					return item.goodsId;
				});

				// 数组元素以逗号分隔
				let idStr = newId.join(',');

				this.goodsList = await this.$request({
					url: '/api/public/v1/goods/goodslist?goods_ids=' + idStr
				});

				// 请求结束后合并数组，以goodsCart为主
				this.goodsCart = this.cartData.map(item => {
					let cartGoods = this.goodsList.find(goitem => {
						// 将goodsList与goodsCart两个数组中goodsId相同的合并在一起
						return goitem.goods_id === item.goodsId
					})
					return { ...item,
						...cartGoods
					}
				})
			}
		}
	}
</script>
<style lang="less">
	.iconfont {
		font-size: 44rpx;
	}

	.title {
		height: 88rpx;
		display: flex;
		align-items: center;

		.iconfont {
			color: #999;
			margin: 6rpx 12rpx 0 32rpx;
		}
	}

	.goods-item {
		height: 206rpx;
		background-color: #fff;
		border-top: 1rpx solid #ddd;
		display: flex;
		box-sizing: border-box;
		align-items: center;

		.iconfont {
			color: #eb4450;
			margin: 0 30rpx;
		}

		image {
			width: 160rpx;
			height: 160rpx;
		}

		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			margin: 0 20rpx 0 18rpx;

			.btm {
				display: flex;
				margin-top: 40rpx;
				justify-content: space-between;

				.price {
					color: #eb4450;
					display: flex;

					>text {
						font-size: 24px;
					}
				}

				.goods-num {
					display: flex;
					align-items: center;

					button {
						width: 60rpx;
						height: 50rpx;
						box-sizing: border-box;
						display: flex;
						justify-content: center;
						align-items: center;
						border: 4rpx solid #666;
					}

					text {
						margin: 0 30rpx;
					}
				}
			}
		}
	}

	.goods-list {
		position: absolute;
		bottom: 98rpx;
		top: 88rpx;
		width: 100%;
		overflow: auto;
		padding-bottom: 60rpx;
		background-color: #f4f4f4;
	}

	.account {
		height: 98rpx;
		border-bottom: 1rpx solid #ddd;
		display: flex;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		align-items: center;

		.iconfont {
			color: #eb4450;
			margin: 0 30rpx;
		}

		.account-btn {
			width: 230rpx;
			height: 98rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			background-color: #eb4450;
		}

		.select-all {
			flex: 1;
			display: flex;
			align-items: center;

			.price-wrapper {
				display: flex;
				flex: 1;
				justify-content: flex-end;
				align-items: center;
			}
		}

		.price {
			margin-right: 20rpx;

			.num {
				color: #eb4450;
			}

			.info {
				color: #999;
			}
		}
	}
</style>
